<template>
  <div class="w-full h-full flex flex-col">
    <div class="flex items-center justify-between mb-4 h-16">
      <div class="flex gap-4">
        <WyCommunitySelect v-model="communityId" @change="initPage()" placeholder="请选择项目" />
      </div>
      <div class="flex items-center text-xs text-zinc-500 gap-3" v-if="communityId">
        <span>总户数:{{ summary.row_count || 0 }}</span>
        <span>总欠费金额：<el-money :num="summary.sum_amount || 0" /></span>
        <span>未收回金额：<el-money :num="summary.sum_last_amount || 0" /></span>
        <span>已收回金额：<el-money :num="summary.sum_has_pay_amount || 0" /></span>
        <div class="progress" style="--el-fill-color-light: #fff">
          <el-progress type="circle" :width="56" :stroke-width="4"
            :percentage="summary.sum_amount ? Number((100 * summary.sum_has_pay_amount / summary.sum_amount).toFixed(2)) : 0" />
        </div>
      </div>
    </div>
    <TableLayout class="full-page flex-1 overflow-hidden" v-model:page="page_num" v-model:size="size" :total="total"
      @table-change="getTableData">
      <template #header>
        <TopFilter :model="params" :filters="filters" @change="getTableData()" />
      </template>
      <template #table>
        <TableCard :tableData="tableData" v-loading="loading" id-key="arrears_data_id">
          <template #handler="{ row }">
            <span>{{ row.status }}</span>
          </template>
        </TableCard>
      </template>
    </TableLayout>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TableLayout from '@/components/TableLayout.vue'
import TopFilter from '@/components/CRUD/TopFilter.vue'
import TableCard from '@/components/TableCard/index.vue'
import WyCommunitySelect from './components/WyCommunitySelect.vue'
import { useTable, useFilters } from '@/hooks'
import { wyArrears, wyArrearsSummary } from '@/api/wy'

const filters = [
  { key: 'keyword', type: 'input', props: { placeholder: '请输入姓名、电话或房间号' } },
  {
    key: 'status',
    type: 'select',
    props: { placeholder: '请选择收回状态' },
    options: [{ value: '已收回', label: '已收回' }, { value: '部分收回', label: '部分收回' }, { value: '未收回', label: '未收回' }]
  },
]

const communityId = ref()
const { params, getParams } = useFilters(filters)
const { page_num, size, total, tableData, getData, loading } = useTable(wyArrears)
const getTableData = (keepPage) => {
  if (!keepPage) page_num.value = 1
  getData({
    community_id: communityId.value,
    ...getParams()
  })
}

// 摘要
const summary = ref({
  sum_has_pay_amount: 0, // 已支付金额
  sum_last_amount: 0, // 总剩余金额
  row_count: 0, // 行数
  sum_amount: 0, // 总金额
})
const getSummary = async () => {
  if (!communityId.value) return;
  const { data } = await wyArrearsSummary({
    page_num: page_num.value,
    size: size.value,
    community_id: communityId.value,
  });
  summary.value = data || {}
}

const initPage = (keepPage) => {
  getTableData(keepPage);
  getSummary();
}
initPage();
</script>

<style lang="scss" scoped>
.progress {
  :deep(.el-progress__text) {
    min-width: auto;
    font-size: 12px !important;
  }
}
</style>